<template>
  <div class="all" v-loading="loading">
    <div>
         <el-date-picker
            v-model="value1"
            type="daterange"
            clearable
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy:MM:dd 00:00:00"
            >
          </el-date-picker>
          <el-select v-model="status" placeholder="请选择" clearable>
              <el-option label="申请中" :value="0"></el-option>
              <el-option label="已完成" :value="1"></el-option>
              <el-option label="拒绝打款" :value="2"></el-option>
            </el-select>
            <el-input v-model="userId" placeholder="请输入查询的用户ID" style="width: 180px;" clearable></el-input>
               <el-button type="primary" icon="el-icon-search" @click="query">查询</el-button>
      <el-button type="primary" icon="el-icon-download" @click="exportExcel">导出</el-button>
    </div>
      <div style="padding: 5px 0;">
        <el-table :data="list" :header-cell-style="{background:'#eef3f7'}">
          <el-table-column align="center" prop="userId" label="用户ID"></el-table-column>
          <el-table-column align="center" prop="enable" label="可提现总余额"></el-table-column>
          <el-table-column align="center" prop="tixian" label="提现金额"></el-table-column>
          <el-table-column align="center" prop="type" label="提现方式"></el-table-column>
          <el-table-column align="center" prop="account" label="提现账号"></el-table-column>
          <el-table-column align="center" prop="realName" label="真实姓名"></el-table-column>
          <el-table-column align="center" prop="addTime" label="申请时间"></el-table-column>
          <el-table-column align="center" prop="orderNumber" label="打款订单号" v-if="status==1"></el-table-column>
          <el-table-column align="center" prop="reason" label="未打款原因" v-if="status==2"></el-table-column>
          <el-table-column align="center" label="操作" v-if="status==0">
            <template slot-scope="scope">
              <div v-if="scope.row.status!=0">
                <i v-if="scope.row.status==1">已打款</i>
                <i v-else>已拒绝</i>
              </div>
              <div v-else>
                <el-button type="success" size="small" @click="Submit(1,scope.row.id)">已打款</el-button>
                <el-button type="danger" size="small" @click='Submit(2,scope.row.id)'>拒绝打款</el-button>
              </div>
             
            </template>
          </el-table-column>
        </el-table>
        <div class="Page">
              <el-pagination
                background
                hide-on-single-page
                @current-change="handleCurrentChange"
                :current-page="condition.pageIndex"
                :page-size="condition.pageSize"
                layout="total, prev, pager, next, jumper"
                :total="condition.quantity">
              </el-pagination>
        </div>
      </div>

  </div>

</template>

<script>
  import Blob from '@/Expcel/Blob'
  import Export2Excel from '@/Expcel/Export2Excel.js'
  import Cookies from 'js-cookie'
  import {Tixiandeal,TixiangetRecords} from '@/utils/API'
 export default {
       inject:["reload"],
   data(){
     return{
   condition:{
     pageIndex:1,
     pageSize:15,
     quantity:0,
   },
        list:[],
        decision:'',
        status:0,
         orderNumber:'',
         reason:'',
         id:'',
         userId:null,
         value1:'',
         loading:true
     }
   },
   methods:{
     //导出
     exportExcel() {
           require.ensure([], () => {
             const { export_json_to_excel } = require('@/Expcel/Export2Excel');
             const tHeader = ['用户ID', '提现金额', '可提现总余额','提现方式','提现账号','申请时间'];
             // 上面设置Excel的表格第一行的标题
             const filterVal = ['userId', 'tixian', 'enable','type','account','addTime'];
             // 上面的index、nickName、name是tableData里对象的属性
             const list = this.list;  //把data里的tableData存到list
             const data = this.formatJson(filterVal, list);
             export_json_to_excel(tHeader, data, '提现申请'+new Date().toLocaleDateString());
           })
         },
         formatJson(filterVal, jsonData) {
           return jsonData.map(v => filterVal.map(j => v[j]))
           },
     Postdata(){
      var _this=this
      this.loading=true
    const data={
      adminName:Cookies.get('adminName'),
      token:Cookies.get('token'),
      pageNum:_this.condition.pageIndex,
      pageSize:_this.condition.pageSize,
      startTime:_this.value1[0],
      endTime:_this.value1[1],
      status:_this.status,
      userId:_this.userId
    }
    TixiangetRecords(data).then(res=>{
      this.list=res.data.records
      this.condition.quantity=res.data.total
      this.$nextTick(function(){
       this.loading=false
      })
    })
     },
     Submit(e,i){
        var name=''
        var type=''
        if(e==1){
          name='打款单号'
          type="text"
        }else{
          name='拒绝原因'
          type="textarea"
        }
        this.$prompt(name, '提示', {
                 confirmButtonText: '确定',
                 cancelButtonText: '取消',
                 inputPattern:  /\S/,
                 inputErrorMessage: '请输入信息',
                 customClass:'pop',
                 inputType:type
               }).then(({ value }) => {
                  var data=new Array()
                    if(e==1){
                      data={
                               id:i,
                               adminName:Cookies.get('adminName'),
                               token:Cookies.get('token'),
                               decision:e,
                               orderNumber:value
                             }
                    }else{
                             data={
                               id:i,
                               adminName:Cookies.get('adminName'),
                               token:Cookies.get('token'),
                               decision:e,
                               reason:value
                             }
                    }
                         Tixiandeal(data).then(res=>{
                           if(res.code==0){
                             this.$message.success('操作成功')
                             this.reload()
                           }
                         })
               }).catch(() => {

               });
     },
  handleCurrentChange(val) {
       this.condition.pageIndex=val
       this.Postdata()
  },
  //查询
    query(){
      this.condition.pageNum=1
      this.Postdata()
    }
   },
   mounted() {
    this.Postdata()
   },
watch:{
  value1(val){
    if(val==null){
      this.value1=''
    }
  },
  status(val){
    this.Postdata()
  }
}
 }
</script>

<style lang="scss">

.pop{
      .el-message-box__message{
        font-size: 20px;
        font-weight: 700;
      }
      .el-input{width: 100%;}
      }
</style>
